<template>
  <page-frame>
    <div class="serviceRecord">
      <div class="toptitle">
        <div class="left padding-bottom-6">服务记录</div>
      </div>
      <div class="borderT"></div>
      <div class="tabChange">
        <!--<span>服务类型:</span>-->
        <el-button @click="toggle(index,tab.id)" v-for="(tab,index) in tabs" :class="{lightGreenBtn:active===index}">{{tab.name}}</el-button>
      </div>
      <el-row class="query">
        <el-col style="width: 130px;">
          <div class="input-item">
            <el-select style="width:90%!important;" v-model="queryData.fileId" @change="selectItem" clearable placeholder="请选择项目">
              <el-option
                v-for="item in fileList"
                :label="item.fileName"
                :value="item.fileId">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6" v-show="queryData.fileId=='1'">
            <el-input v-model="queryData.serviceNo"  @keyup.enter.native="query"  placeholder="请输入服务编号">
            </el-input>
        </el-col>
        <el-col :span="6" v-show="queryData.fileId=='2'">
            <el-input v-model="queryData.serviceName"  @keyup.enter.native="query"  placeholder="请输入服务项目">
            </el-input>
        </el-col>
        <el-col :span="6" v-show="queryData.fileId=='3'">
            <el-input v-model="queryData.memberName" @keyup.enter.native="query"  placeholder="请输入服务对象">
            </el-input>
        </el-col>
        <el-col :span="2">
          <div class="btns" style=" width:70%;">
            <el-button class="query lightGreenBtn" @click="query">搜索</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        border
        @row-dblclick = "handleRowClick"
        style="width: 100%">
        <el-table-column
          prop="serviceNo"
          label="服务编号"
          width="">
        </el-table-column>
        <el-table-column
          prop="serviceName"
          label="服务项目"
          width="">
        </el-table-column>
        <el-table-column
          prop="memberName"
          label="服务对象"
          width="">
        </el-table-column>
        <!--<el-table-column-->
          <!--prop="content"-->
          <!--label="服务内容"-->
          <!--width="">-->
        <!--</el-table-column>-->
        <el-table-column
          prop="planTimeStartName"
          label="开始时间"
          width="">
        </el-table-column>
        <el-table-column
          prop="finishTime"
          label="完成时间"
          width="">
        </el-table-column>
        <el-table-column
          prop="emName"
          label="服务人员"
          width="">
        </el-table-column>
      </el-table>
      <div class="pagination">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChangePage"
            :current-page="currentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script >
  import recordApi from '../../service/serManagement/recordApi'
  export default {
    data () {
      return {
        active:0,
        queryData:{
          serviceNo:'',
          serviceName:'',
          memberName:'',
          typeId:'',
          fileId:1
        },
        fileList:[{
          fileId: 1,
          fileName: "服务编号"
        },{
          fileId: 2,
          fileName: "服务项目",
        },{
          fileId: 3,
          fileName: "服务对象",
        }],
        tabs:[{
          id:0,
          name:"全部",
        },{
          id:1,
          name:"生活类",
        },{
          id:2,
          name:"护理类",
        },{
          id:3,
          name:"医疗类",
        },{
          id:4,
          name:"康复类",
        }],
        tableData:[],
        currentPage:1,
        total:1,
      }
    },
    methods: {
      init() {
        this.loadTableData();
      },
      selectItem(){
        this.queryData.serviceNo = '';
        this.queryData.serviceName = '';
        this.queryData.memberName = '';
      },
      /**
       * 加载页面数据
       */
      loadTableData(){
        let self = this;
        recordApi.getServicePlanRecordList(10, self.currentPage, self.queryData).then(function (response) {
          self.tableData = response.body.data.list;
          if (!response.data.data.total) {
            self.total = 1;
          } else {
            self.total = response.body.data.total;
          };

          for(let i=0;i<self.tableData.length;i++){
            self.tableData[i].planTimeStartName = self.tableData[i].planTimeStart.substring(0,19);
          }
//          self.reduction();
        }, function () {
        })
      },
      /**
       * 搜索
       */
      query(){
        this.loadTableData()
      },
      /**
       * tab切换
       */
      toggle(index,id){
        this.active = index;
        this.queryData.typeId = id;
        this.loadTableData();
      },
      /**
       * 单击行进入详情
       */
      handleRowClick(row){
        this.$router.push({name: 'serviceRecordInfo',params:{workId:row.workId}});
      },
      /**
       * 分页函数
       */
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.loadTableData(this.queryData);
      },
    },

    mounted: function () {
      this.init();
    },
  }
</script>
<style>
  .serviceRecord .tabChange{
    /*width:500px;*/
    margin:0 0 15px;
  }
  .serviceRecord .query{
    margin-bottom:13px;
  }
</style>
